<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线日志</title>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<style>
    html,body,p
    {
        margin: 0;
    }
	html,body
	{
		height:100%;
		width:100%;
	}
    p {
        font-size: 12px;
        line-height:1em;
        display: block;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
</style>
</head>
<body>
    <div id="log-container" style="height: 100%;overflow-y: scroll;background: #212121;color: #e3e0e0;padding-left: 6px;padding-top: 6px;line-height: 1.5em;font-size: 15px;">
        <div>
        </div>
    </div>
</body>
<script>
    const webSocket="ws://localhost:8080";
    $(document).ready(function() {
        var websocket = new WebSocket(webSocket+'/log');
        websocket.onmessage = function(event) {
            $("#log-container div").append( `<p>${event.data}</p>`);
            $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
        };
    });
</script>
</body>
</html>